<template>
	<div class="form-control">
		<el-form :model="clazz" label-width="auto">
			<el-form-item label="班级名称">
				<el-select v-model="clazz.name" clearable placeholder="请选择班级名称">
					<el-option 
						v-for="item in clazzList" 
						:key="item.id" 
						:label="item.name" 
						:value="item.id" 
					/>
				</el-select>
			</el-form-item>

      		<el-form-item label="课程时长">
				<el-input :model-value="clazz.duration" readonly placeholder="请输入课程时长">
				    <template #append>月</template>
				</el-input>
			</el-form-item>

			<el-form-item label="班主任">
				<el-input
					 :model-value="clazz.manage_name" type="text" readonly placeholder="请输入班主任名称"/>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import API from '@/api'

export default {
	data(){
		return {
			clazz: {
				name: null,
				duration: '',
				manage_name: ''
			},
			clazzList: []
		}
	},
	async created() {
		try {
			// console.log('开始获取班级列表...')
			const response = await API.getClazzList()
			// console.log('API响应数据:', response)
			
			// 检查响应数据的结构
			if (response && response.classes && Array.isArray(response.classes)) {
				this.clazzList = response.classes
				// console.log('处理后的班级列表:', this.clazzList)
			} else {
				console.error('API返回的数据格式不正确:', response)
			}
		} catch (error) {
			console.error('获取班级列表失败:', error)
			if (error.response) {
				console.error('错误响应:', error.response.data)
				console.error('错误状态码:', error.response.status)
			}
		}
	},
	watch: {
		'clazz.name': {
			handler(newVal) {
				// console.log('班级选择变化:', newVal)
				if (newVal) {
					const selectedClazz = this.clazzList.find(item => item.id === newVal)
					// console.log('选中的班级信息:', selectedClazz)
					if (selectedClazz) {
						this.clazz.duration = selectedClazz.duration
						this.clazz.manage_name = selectedClazz.manage_name
					}
				} else {
					this.clazz.duration = ''
					this.clazz.manage_name = ''
				}
			},
			immediate: true
		}
	}
}
</script>

<style scoped>
.form-control {
	padding: 30px 30px 10px;
}
</style>